<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
<!--v-if和v-else-if和v-else中间不能有任何代码-->
<!--通过创建元素，实现切换    -->
    <body>
<!--        <div id="app" >-->
<!--           <div v-if="flag">-->
<!--               邮箱：<input type="text" placeholder="邮箱">-->
<!--           </div>-->
<!--            <div v-else>-->
<!--                电话：<input type="text" placeholder="电话">-->
<!--            </div>-->
<!--            <input type="button" value="切换" @click="qie()">-->
<!--        </div>-->

<!--通过改变元素的样式，来切换显示，隐藏-->
        <div id="app" >
            <div v-show="flag">
                邮箱：<input type="text" placeholder="邮箱">
            </div>
            <div v-show="!flag">
                电话：<input type="text" placeholder="电话">
            </div>
            <input type="button" value="切换" @click="qie()">
        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    flag: true
                },
                methods:{
                    qie() {
                        this.flag=!this.flag;
                    }

                }
            })
        </script>
    </body>
</html>